Add motion animations (hover, entrance effects) to Card, StatCard, EmptyState, and SectionHeader using beUI motion patterns. Respects prefers-reduced-motion for accessibility.

- Card: 1.01x hover scale
- StatCard: 1.02x hover scale with icon pulse
- EmptyState: slide-in entrance with icon hover
- SectionHeader: slide-in entrance with action hover

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Update core components to match beUI's visual design and motion patterns:

**AnimatedToastStack:**
- Add 6 statuses (success, error, warning, info, neutral, loading)
- Change opacity: 95% → 10% tint (semi-transparent instead of opaque)
- Add action button support with callbacks
- Add loading status with spinning icon animation
- Improve styling: border-opacity, padding, font-weight alignment
- Better accessibility with hover states

**AnimatedBadge:**
- Add 6 status types (success, error, warning, info, neutral, loading)
- Add size variants (sm, md) for flexible layouts
- Add loading status with rotating icon
- Add showIcon prop for icon toggle
- Add tabular-nums for numeric alignment
- Update colors to match tinted design tokens

**Button:**
- Replace gradient (from-blue-600 to-violet-600) with solid color (blue-600)
- Adjust border radius: rounded-xl → rounded-lg/rounded-xl
- Maintain accessibility and ripple effects

**Tabs:**
- Increase text size: text-xs → text-sm
- Adjust padding: px-2 py-2 → px-2.5 py-1.5
- Use font-medium instead of font-semibold
- Improve spacing consistency

All changes respect prefers-reduced-motion. Tests pass ✓

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Align Select component with beUI design patterns:
- Adjust border radius: rounded-xl → rounded-lg
- Add error state support with visual feedback
- Add animated chevron icon response to error state
- Improve styling consistency with other form inputs
- Better visual hierarchy and accessibility

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Minor style refinements across components:

**Card:**
- Update border color: white/70 → gray-200/80
- Update background: white/80 → white/85
- Align with beUI's color palette

**Input:**
- Change border radius: rounded-xl → rounded-lg
- Improve dark mode ring colors
- Better visual hierarchy

**ToggleSwitch:**
- Remove gradient: from-blue-600 to-violet-600 → solid blue-600
- Match beUI's simpler color approach

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Update Tooltip component:
- Change border radius: rounded-xl → rounded-lg
- Update font: text-[11px] font-semibold → text-xs font-medium
- Add dark mode background variant

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Final styling consistency pass:

**EmptyState:**
- Border radius: rounded-2xl → rounded-xl
- Border opacity: gray-200 → gray-200/80

**StatCard:**
- Border radius: rounded-2xl → rounded-xl
- Background: white/70 → white/85
- Dark mode: bg-gray-800/60 → bg-gray-800/70

Ensures consistent visual language across all UI components aligned with beUI design system.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Add complete beUI design token system for theme consistency:

**Tailwind Config:**
- Add semantic color tokens (background, foreground, card, primary, destructive, etc.)
- Use CSS custom properties for dynamic theming
- Support light and dark mode variants

**Global Styles:**
- Define CSS variables for light mode (light background, dark foreground)
- Define CSS variables for dark mode (dark background, light foreground)
- All tokens properly scoped with HSL values

**Updated Components:**
- Button: Use primary, destructive, accent, muted tokens
- Card: Use card, border tokens
- Input: Use input, border, ring, destructive tokens
- Select: Use input, border, ring, destructive tokens

Benefits:
✓ Single source of truth for colors (CSS variables)
✓ Easy theme switching (just toggle dark class)
✓ Consistent design system across all components
✓ Future-proof for light/dark mode and custom themes

All tests pass ✓

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Update components to use semantic design tokens:

**AnimatedBadge:**
- Replace hard-coded colors with design tokens
- info: blue-200/80 → border-border bg-primary/10 text-primary
- success: emerald-200/80 → border-border bg-accent/10 text-accent
- danger: red-200/80 → border-border bg-destructive/10 text-destructive
- neutral: gray-200/80 → border-border bg-muted text-muted-foreground

**AnimatedToastStack:**
- Replace all status colors with semantic tokens
- Consistent border and background opacity (30%, 10%)
- Text colors match status semantics

Result: Colors now automatically adapt to theme changes via CSS variables.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Update components and tests to use semantic design tokens:

**Components updated:**
- Tabs: gray-200/80 → border-border, bg-gray-100/80 → bg-muted, blue-700 → primary
- ToggleSwitch: bg-blue-600 → bg-primary, bg-gray-300 → bg-muted
- Tooltip: bg-gray-950 → bg-foreground, text-white → text-background

**Tests updated:**
- Toggle test expectations changed to use new design token classes
- Tests now verify behavior via design tokens instead of hard-coded colors

All components now follow beUI design token system for theme consistency.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

This commit fixes the style issues introduced in 48dbec3 according to the output
from Prettier.

Details: #23

Fine-tune CSS variable values to match beUI visual design:
- Simplify HSL values for clarity
- Update dark mode card background (0 0% 13%)
- Update muted colors for better contrast
- Refine accent color (16 86% 67% - orange tone)
- Adjust border colors for dark mode

Design token system now provides accurate colors without shadcn dependency.
Components use semantic tokens that adapt to light/dark mode automatically.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Add project-level Claude configuration with beUI MCP integration.
Enables direct access to beUI components and design tokens.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Fix critical and medium-priority issues to match beUI design patterns:

**Critical Fixes:**
- Fix focus ring: use design tokens (ring-ring/60) instead of hardcoded colors
- Fix focus ring offset: use background token for dark mode consistency

**Spec Alignment:**
- Ghost variant: change from 'text-foreground hover:bg-muted'
  to 'text-muted-foreground hover:text-foreground hover:bg-primary/5'
- Outline variant: change hover from 'hover:bg-muted' to 'hover:bg-primary/5'

All changes use semantic design tokens for better theme consistency.
Tests: 91/91 passing ✓

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

This commit fixes the style issues introduced in 2e73db8 according to the output
from Prettier.

Details: #23

Replace simple HTML select wrapper with full beUI motion Select component:

**New Select Features:**
- Compound component pattern (Select, SelectTrigger, SelectValue, SelectContent, SelectItem)
- Context-based state management
- Gooey border morphing animation (flat edge faces trigger, rounds when opening)
- Staggered item entrance animations
- Automatic placement detection (top/bottom based on space)
- ResizeObserver for dynamic height animation
- Click-outside and Escape key handling
- Full keyboard accessibility (aria-* attributes)
- Chevron rotation animation
- Reduced motion support

**Updated:**
- src/components/ui/Select.tsx - Full beUI implementation
- src/components/alias/AccountSwitcher.tsx - Uses new compound API
- src/components/ui/index.ts - Export all Select components

**Benefits:**
- 100% beUI compliant
- Smooth entrance/exit animations
- Advanced gooey morphing effect
- Better UX with space detection
- Production-ready component

Tests: 91/91 passing ✓

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

…tps://github.com/ePlus-DEV/gmail-alias-toolkit into codex/refactor-popup-ui-using-beui-design-bnuwpe

This commit fixes the style issues introduced in cafdfcd according to the output
from Prettier.

Details: #23

- Deleted AnimatedToastStack, Badge, Button, Card, EmptyState, Input, NumberAnimation, SectionHeader, Select, StatCard, Tabs, Toast, ToggleSwitch, Tooltip components.
- Removed associated exports from the ui index file.
- Updated vitest and wxt configurations to include path aliases for src directory.

- Replaced button elements with a custom Button component in Statistics and WelcomeScreen for uniformity.
- Updated text colors to use the new text-foreground and text-muted-foreground classes across various components.
- Adjusted background colors to align with the new design system, including changes to WelcomeScreen and AccountSwitcher.
- Enhanced accessibility and usability by ensuring proper class names and hover effects.
- Refactored input handling in WelcomeForm to utilize the Input component.
- Improved test files for Button, GmailTricks, Input, and Toggle components by adding spacing for better readability.

…stency

…consistency

…sistency and user experience

- Add RowHandle component for row-specific actions (insert, delete).
- Introduce SkeletonRows component for loading state representation.
- Create TableHeader component with sorting, resizing, and reordering capabilities.
- Implement TableMenu for contextual actions on rows and columns.
- Define types for table columns, sorting, and row selection.
- Add hooks for column reordering, resizing, sorting, and row selection.
- Enhance utility functions for text alignment and cell rendering.
- Update yarn.lock to include new dependencies for virtualized rendering.

…lculations

…l feedback and consistency

…e languages

- Added new localization strings for English, French, Hindi, Japanese, Vietnamese, and Simplified Chinese.
- Updated existing messages to remove checkmarks and improve clarity in user feedback.
- Enhanced tooltip content for theme toggle in the PopupHeader component.

This commit fixes the style issues introduced in 032b226 according to the output
from Prettier.

Details: #23